<template>
    <div class="screen-block">
        <Title>{{ $t('screen.fuelTotalVolumn') }}</Title>
        <div style="width: 100%; height: 90%">
            <Charts :option="option" />
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { Charts } from '@kjgl77/datav-vue3';
    import useTimeExecutor from '@/hooks/useTimeExecutor';
    import Title from '../title.vue';
    import { queryCurrentFuelConsume } from '../../service';

    const option = ref({
        series: [
            {
                type: 'pie',
                data: [{ name: 'LNG', value: 0 }],
                radius: ['45%', '65%'],
                insideLabel: {
                    show: false,
                },
                outsideLabel: {
                    labelLineEndLength: 10,
                    formatter: '{name}:{value}',
                    style: {
                        fontSize: 14,
                        fill: '#fff',
                    },
                },
            },
        ],
        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
    });
    const fetchData2 = async () => {
        const data = await queryCurrentFuelConsume();
        const { result } = data as any;

        option.value.series[0].data = result.consumeList.map(
            (o: { fuelName: string; volume: string }) => {
                return {
                    name: o.fuelName,
                    value: parseFloat(o.volume),
                };
            }
        );
    };
    // fetchData2();
    useTimeExecutor({
        second: 10,
        immediate: true,
        func: fetchData2,
    });
</script>

<style lang="less">
    .screen-block {
        width: 100%;
        height: 100%;
    }
</style>
